<!-- eslint-disable vue/no-mutating-props -->
<template>
    <div class="base-dialog">
        <el-dialog
            v-el-drag-dialog
            :type="type"
            :custom-class="customClass"
            :close-on-click-modal="closeOnClickModal"
            :visible="visible"
            :title="title"
            :width="width"
            :show-close="true"
            :before-close="beforeClose"
        >
            <!-- <el-card> -->
            <el-form
                ref="d-form"
                :model="form"
                :label-position="labelPosition"
                label-width="120px"
            >
                <el-row :gutter="20">
                    <el-col
                        v-for="(item, index) in items"
                        v-show="item.hidden ? !item.hidden(form) : true"
                        :key="index"
                        :span="item.span || 20"
                    >
                        <el-form-item
                            :label="item.label"
                            :prop="item.prop"
                            :rules="item.hidden && item.hidden(form) ? null : item.rules"
                        >
                            <el-tooltip
                                :disabled="!item.tip"
                                effect="dark"
                                :content="item.tip"
                                placement="top"
                            >
                                <slot
                                    v-if="item.elName === 'slot'"
                                    :name="item.prop"
                                    :form="form"
                                />
                                <el-component
                                    v-else
                                    v-model="form[item.prop]"
                                    :el-name="item.elName"
                                    :on="item.on || {}"
                                    :attrs="item.attrs || {}"
                                    :options="item.options || []"
                                    :disabled="item.disabled ? item.disabled(form) : false"
                                />
                            </el-tooltip>
                        </el-form-item>
                    </el-col>
                    <slot />
                </el-row>
            </el-form>
            <!-- </el-card> -->

            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="onCancel">取 消</el-button>
                <el-button type="primary" size="small" @click="onSubmit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
// 弹窗拖动
import elDragDialog from '@/lib/el-dragDialog'
import elComponent from '@/lib/elComponent.js'
export default {
    name: 'ElDialogForm',
    directives: {
        elDragDialog
    },
    components: {
        elComponent
    },
    props: {
        closeOnClickModal: { type: Boolean, default: false }, // 是否可以点击关闭
        type: String, // 对话框类型：1.基础表单[base-dialog-form] 2.表格[base-dialog-table] 3.全屏 [base-dialog-fullscreen]
        // 是否显示dialog
        visible: {
            type: Boolean,
            default: false
        },
        // 标题
        title: {
            type: String,
            default: ''
        },
        // 宽度
        width: {
            type: String,
            default: ''
        },
        // 表单项
        items: {
            type: Array,
            default: () => []
        },
        // 表单值
        form: {
            type: Object,
            default: () => {
                return {}
            }
        },
        labelPosition: {
            type: String,
            default: 'right'
        }
    },
    data() {
        return {
            localForm: {...this.form}
        }
    },
    computed: {
        customClass() {
            let className = ''
            switch (this.type) {
                case 'form':
                    className = 'base-dialog-form'
                    break
                case 'table':
                    className = 'base-dialog-table'
                    break
                case 'fullscreen':
                    className = 'base-dialog-fullscreen'
                    break
            }
            return className
        }
    },
    created() {
        this.type === 'fullscreen' && (this.fullscreen = true)
    },
    methods: {
        onSubmit() {
            this.$refs['d-form'].validate(valid => {
                if (valid) {
                    // eslint-disable-next-line vue/no-mutating-props
                    // this.form = this.localForm
                    this.$emit('submit', this.form)
                    // console.log('this.form', this.localForm)
                    // this.$emit('update:form', this.localForm)
                }
            })
        },
        onCancel() {
            // eslint-disable-next-line vue/no-mutating-props
            // this.visible = false
            this.$emit('update:visible', false)
            this.$emit('cancel')
            this.$refs['d-form'].resetFields()
        },
        close() {
            this.$emit('update:visible', false)
            this.$refs['d-form'].resetFields()
        },
        beforeClose() {
            this.$emit('update:visible', false)
            this.$refs['d-form'].resetFields()
        }
    }
}
</script>

  <style lang="scss">
    .el-form-item {
        margin-bottom: 15px !important;
    }
    .base-dialog {
        text-align: left;
        .el-dialog__wrapper {
            // overflow: hidden;
            .el-dialog {
                display: flex;
                flex-direction: column;
                .el-dialog__header {
                    height: 40px;
                    line-height: 40px;
                    padding: 0 20px;
                    background: #eff3fa;
                    color: #fff;
                    border-bottom: 1px solid #dcdfe6;
                    border-top-left-radius: 0;
                    border-top-right-radius: 0;
                    .el-dialog__title {
                        font-size: 16px;
                        // font-weight: bold;
                    }
                    .el-dialog__headerbtn {
                        top: 12px;
                    }
                }
                .el-dialog__body {
                    flex: 1;
                    overflow: auto;
                    padding: 20px !important;
                    max-height: 600px;
                }
                .el-dialog__footer {
                    text-align: center;
                    border-top: 1px solid #eee;
                    padding: 8px 20px;
                    background: #fefefe;
                }
            }
            .base-dialog-form {
                height: auto;
                margin-top: 15vh !important;
                .el-dialog__body {
                    padding: 20px 20px 0 20px !important;
                }
                .el-dialog__footer {
                    border: none;
                    padding: 10px 20px 20px;
                    background: none;
                }
                .custom-table {
                    // 取消表格下边线
                    tbody tr:last-child td {
                        border-bottom: none !important;
                    }
                }
            }
            .base-dialog-table {
                height: 90vh;
                margin-top: 5vh !important;
            }
            .base-dialog-fullscreen {
                height: 100vh;
                width: 100vw;
                .el-dialog__body {
                    padding: 10px;
                }
            }
        }
    }
    .el-date-editor.el-input {
        width: 100% !important;
    }
    .el-select {
        width: 100% !important;
    }
    .base-dialog .el-range-editor.el-input__inner {
        width: 100% !important;
    }
    .el-cascader {
        width: 100% !important;
    }
  </style>
